
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="utf-8">
    <meta charset="utf-8">
    <title>学生外出请假</title>
    <style type="text/css">
        body, html {
            background-color: #e1edfe;
            margin: 0;
        }

        .topcard {
            font-family: "comic sans ms";
            font-size: 15px;
            background-color: #1eb2b1;
            height: 22vh;
            padding: 5vw;
            margin: 4vh 5vw 0 5vw;
            width: 80vw;
            border-radius: 10px;
            color: white;
            display: grid;
            grid-template-columns: 65% 35%;
        }

            .topcard div {
                margin-bottom: 0;
            }


            .topcard p {
                padding-top: 2px;
                margin-top: 1px;
                margin-bottom: 1px;
                padding-left: 5px;
            }

        .main {
            background-color: #ffffff;
            height: 41vh;
            margin-left: 10vw;
            width: 80vw;
            border-radius: 0px 0px 10px 10px;
            box-shadow: inset 0px 16px 15px -11px #a5d1cf;
        }

            .main img {
                margin-top: 6vh;
                margin-left: 10vw;
                height: 60vw;
            }

            .main p {
                text-align: center;
            }

        #date3, #time {
            font-size: 20px;
            font-weight: 700;
        }

        #time {
            padding-left: 10px;
            color: #ff2a2a;
        }

        #timer {
            font-weight: 900;
            color: #fe3434;
            font-size: 4em;
            position: absolute;
            z-index: 10;
            padding-top: 18vh;
            padding-left: 18%;
            -webkit-text-stroke: #fff003 2px;
        }

        .bottom {
            margin-left: 0;
            margin-right: 0;
            margin-top: 4vh;
            width: 100vw;
            text-align: center;
            font-weight: 200;
            font-size: 12px;
            color: #8d8f91;
        }

        [contenteditable="true"] {
            transition: 200ms background-color;
        }

            [contenteditable="true"]:focus {
                background-color: #265973;
            }
    </style>
</head>
<body>
    <div class="topcard">
        <div>
            <p style="font-weight: 700; padding-top: 5px; font-size: 23px; padding: 4px;">
                <span id="surname">刘</span><span id="givenname">缙东</span>
            </p>
            <p>
                学号：201902810620
            </p>
            <p>
                班级：软件工程201906
            </p>
            <p>
                开始：<span id="date1"></span> 07:00
            </p>
            <p>
                结束：<span id="date2">2020-01-10</span> 23:30
            </p>
        </div>


        <img id="output" style="overflow: hidden; height: 100%; width: 100%; min-height: 100%; max-height: 100%;" src="./image/微信图片_20210314121940.jpg" />
    </div>
    </div>
    <input type="file" name="image" id="file" onchange="loadFile(event)" accept="image/*" style="display: none;" />
    <div class="main">
        <span id="timer"><span id="countdown">180</span>S</span>
        <img src="./image/lm.jpg">
        <!--<p><span id="date3">Date </span><span id="time"></span></p>-->
    </div>
    <p class="bottom">请尽快向保安出示该页面，倒计时结束后页面将失效</p>
    <script>
        function checkTime(i) {
            return (i < 10) ? "0" + i : i;
        }
        setInterval(displayTime, 100);
        function displayTime() {
            var currentTime = new Date(),
            h = checkTime(currentTime.getHours()),
            m = checkTime(currentTime.getMinutes()),
            s = checkTime(currentTime.getSeconds());
            document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
        }
    </script>
    <script>
        var timeleft = 180;
        var timer = setInterval(function () {
            timeleft--;
            document.getElementById("countdown").textContent = timeleft;
            if (timeleft <= 0)
                clearInterval(timer)
        }, 1000);
    </script>

    <script>
        var loadFile = function (event) {
            var image = document.getElementById('output');
            image.src = URL.createObjectURL(event.target.files[0]);
        }
    </script>
    <script>
        var today = new Date();
        var y = today.getFullYear();
        var m = today.getMonth() + 1;
        var d = today.getDate();
        document.getElementById('date1').innerHTML = y + "-" + m + "-" + d;
        document.getElementById('date2').innerHTML = y + "-" + m + "-" + d;
        document.getElementById('date3').innerHTML = y + "-" + m + "-" + d;
    </script>
</body>
</html>
